<template>
	<view class="">
		<view class="p14" style="background: #F6F9F9;">
			<view class="fz16 c0 u-font-bold">{{info.name}}</view>
			<view class="u-flex fz12 mt15" style="color: rgba(15, 16, 17, 0.60);">
				<view style="min-width: 130rpx;">问卷进度</view>
				<u-line-progress style="width: 100%;" active-color="#ABC7C9"
					:percent="(curTopic/questionInfo.totalCount*100).toFixed(0)"></u-line-progress>
				<view style="min-width: 70rpx;text-align: right;">
					<span class="c0">{{curTopic}}</span>
					/{{questionInfo.totalCount}}
				</view>
			</view>
		</view>
		<view class="p14">
			<view class="fz14 c0">{{info.name}}
				<span class="c6">{{typeAttr[info.type]}}</span>
				<span style="color: #E54440;">*</span>
			</view>
			<view v-if="info.type==1" class="mt18">
				<u-radio-group v-model="info.value">
					<label class="checkbox" v-for="(item, index) in info.optContent" :key="index">
						<u-radio :name="item.name" active-color="#ABC7C9">{{item.name}}</u-radio>

					</label>
				</u-radio-group>
			</view>
			<view v-if="info.type==2" class="mt18">
				<u-checkbox-group @change="checkboxChange">
					<label class="checkbox" v-for="(item, index) in info.optContent" :key="index">
						<u-checkbox active-color="#ABC7C9" v-model="item.checked" :name="item.name">{{item.name}}
						</u-checkbox>
						<view  v-if="item.isInput" class="brs5 p12 pt6 pb6 mt5"
							style="border: 1px solid #ABC7C9;">
						<input style="padding-left: 0;" v-model="item.value" type="text" :placeholder="item.name" />
					</view></label>
				</u-checkbox-group>
			</view>
			<view v-if="info.type==3">
				<view v-for="(item,index) in info.optContent" class="brs5 p12 pt10 pb10 mt18"
					style="border: 1px solid #ABC7C9;">

					<textarea style="min-height: 150px;" v-model="item.value" :placeholder="item.name" auto-height />
				</view>
			</view>
			<view v-if="info.type==4">
				<view v-for="(item,index) in info.optContent" class="brs5 p12 pt10 pb10 mt18"
					style="border: 1px solid #ABC7C9;">
					<input style="padding-left: 0;" v-model="item.value" type="text" :placeholder="item.name" />
				</view>
			</view>

		</view>
		<view class="fixed-bottom u-flex">
			<view class="mr25 u-f1">
				<view class="btn btn1 " @click="toPrev" v-if="curTopic>1">上一题</view>
			</view>
			<view class="ml25 u-f1">
				<view class="btn " @click="toNext('')" v-if="curTopic<questionInfo.totalCount">下一题</view>
				<view class="btn " @click="toNext('submit')" v-else>提交</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				questionInfo: {},
				info: {},
				typeAttr: ['', '[单选题]', '[多选题]', '[简答题]', '[填空题]'],
				topicAttr: [],
				curTopic: 1,
				allTotal: 1,

			}
		},
		onLoad(e) {
			// e.id = 1
			this.curId = e.id
			this.getInfo()
			this.getTopic()
		},
		onShareAppMessage(e) {},
		// #ifdef MP-WEIXIN
		onShareTimeline() {
			return this.mpShare
		},
		// #endif
		onShow() {},

		methods: {
			checkboxChange(e) {
				this.info.value = e
				console.log(e, 1212)
			},
			toPrev() {
				if (this.topicAttr.length > 0) {
					let i = this.topicAttr.length - 1
					this.topicAttr.splice(i, 1)
					this.info = this.topicAttr[i-1]
					this.curTopic = this.info.orderNo
				}
			},
			toNext(type) {
				let isDisabled = false
				let toCode = ''
				this.info.optContent.some(item => {
					if (this.info.type == 3 || this.info.type == 4) {
						if (!item.value) {
							isDisabled = true
						}
						toCode = item.toCode
					}
					if (this.info.type == 1) {
						if (item.name==this.info.value) {
							toCode = item.toCode
						}
					}
					if (this.info.type == 2) {
						if (item.checked) {
							toCode = item.toCode
						}
					}
				})



				if (this.info.type == 1) {
					if (!this.info.value) {
						isDisabled = true
					}
				}
				console.log(this.info, 1211221)
				if (this.info.type == 2) {
					if (!this.info.value || this.info.value.length < 0) {
						isDisabled = true
					}
				}
				if (isDisabled) {

					if (this.info.type == 3 || this.info.type == 4) {

						this.$common.errorToShow('请填写信息！')
					} else {

						this.$common.errorToShow('请选择信息！')
					}
					return
				}
				if (type == 'submit') {
					this.toSubmit()
					return
				}

				this.getTopic(this.info.orderNo, toCode)

			},
			toSubmit() {
				let data = {
					questionId: this.curId,
					answer: []
				}
				this.topicAttr.some(item => {
					let i = {
						"id": item.id,
						"value": item.value
					}
					if (item.type == 2) {
						
						
						item.optContent.some(topic => {
							if(topic.isInput && topic.value){
								item.value.push(topic.value)
							}
						})
						i.value = String(item.value)
					}

					if (item.type == 3 || item.type == 4) {
						let attr = []
						item.optContent.some(topic => {
							attr.push(topic.value)
						})
						i.value = String(attr)
					}
					data.answer.push(i)
				})

				this.$api.submit_question(data, res => {
					if (res.code == 200) {
						this.$common.successToShow('提交成功', () => {
							uni.redirectTo({
								url: '/pages/question/success'
							})
						})
					} else {

						this.$common.errorToShow(res.message)
					}
				})

			},
			getInfo() {
				let data = {
					id: this.curId
				}
				this.$api.questionInfo(data, res => {
					if (res.code == 200) {
						this.questionInfo = res.data
					}
				})
			},
			getTopic(currentNo, toCode) {

				let data = {
					questionId: this.curId,
					// orderBy: 'next'
				}
				if (currentNo) {
					data.currentNo = currentNo
				}
				if (toCode) {
					data.topicCode = toCode
				} else {

				}
				this.$api.questionTopic(data, res => {
					if (res.code == 200) {

						if (res.data) {

							res.data.optContent = JSON.parse(res.data.optContent)
							if (res.data.type == 2) {
								res.data.optContent.some(item => {
									this.$set(item, 'checked', false)
								})
							}
							res.data.value = ''
							this.info = res.data

							this.curTopic = res.data.orderNo
							this.topicAttr.push(this.info)
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.btn {
		background: #ABC7C9;
		flex: 1;
	}

	.btn1 {
		border: 1px solid #ABC7C9;
		background: none;
		color: #ABC7C9 !important;
	}

	.checkbox {

		display: block;
		margin-bottom: 10px;

		// /deep/ .u-radio {
		// 	float: none !important;
		// }

		// /deep/ .u-checkbox {
		// 	float: none !important;
		// }

		/* 单行之间的间隔 */
	}
</style>